<template>
  <BasicModal
    @register="registerModal"
    v-bind="$attrs"
    ok-text="保存"
    title="添加租户配置"
    :destroy-on-close="true"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm">
      <template #queueSlot>
        <Queue
          :okFlag="flag"
          :editQueue="editQueue"
          :mode="mode"
          @collect-queue-data="handleQueue"
        />
      </template>
      <template #settingSlot>
        <Setting :okFlag="flag" :editSetting="editSetting" @collect-setting-data="handleSetting" />
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { schemas } from './addModal.data';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  import Setting from './components/setting/Setting.vue';
  import Queue from './components/queue/Queue.vue';
  import { ref } from 'vue';

  const emits = defineEmits(['success']);
  const flag = ref<boolean>(false);
  const configuration = ref<object>({});
  const queueConfiguration = ref<Array<object>>([]);
  const queueStatus = ref<boolean>(true);
  const settingStatus = ref<boolean>(true);
  const editSetting = ref<object>({});
  const editQueue = ref<Array<object>>([]);
  const mode = ref<string>('');
  const recordInfo = ref<Recordable>({});
  const [registerModal] = useModalInner(async ({ key, record }) => {
    mode.value = key;
    if (key === 'edit') {
      const { name, description, isolatedTbRuleEngine, profileData } = record;
      recordInfo.value = record;
      editSetting.value = profileData.configuration;
      editQueue.value = profileData.queueConfiguration;
      setFieldsValue({
        name,
        description,
        isolatedTbRuleEngine,
      });
    }
  });
  const [registerForm, { setFieldsValue, validate }] = useForm({
    layout: 'vertical',
    schemas,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });

  async function handleSubmit() {
    flag.value = !flag.value;
    try {
      const values = await validate();
      setTimeout(async () => {
        if (queueStatus.value && settingStatus.value) {
          const { description, isolatedTbRuleEngine, name } = values;
          let params = {
            description,
            isolatedTbRuleEngine,
            name,
            profileData: {
              configuration: configuration.value,
              queueConfiguration: queueConfiguration.value,
            },
          };
          mode.value == 'edit' ? (params['default'] = recordInfo.value.default) : null;
          mode.value == 'edit' ? (params['createdTime'] = recordInfo.value.createdTime) : null;
          mode.value == 'edit' ? (params['id'] = recordInfo.value.id) : null;
          emits('success', 'add', params);
        }
      }, 0);
    } catch (error) {}
  }

  function handleSetting(status: string, data?: any) {
    if (status === 'success') {
      configuration.value = data;
      settingStatus.value = true;
    } else {
      settingStatus.value = false;
    }
  }
  function handleQueue(status: string, data?: any) {
    if (status === 'success') {
      queueConfiguration.value = data;
      queueStatus.value = true;
    } else {
      queueStatus.value = false;
    }
  }
</script>
